<template>
  <div class="sidebar-container">
    <!-- 广告 -->
    <div class="sidebar">
      <!-- 签到栏 -->
      <div class="sidebar-block sign">
        <div class="sign-hello">
          <img
            class="sign-img"
            src="../../../assets/img/home-aside/calendar.png"
            alt=""
          />
          <span>早上好</span>
          <button class="sign-btn">去签到</button>
        </div>
        <div class="sign-des">点亮你在社区的每一天</div>
      </div>
      <!-- 广告栏 -->
      <div class="sidebar-block banner">
        <img src="../../../assets/img/home-aside/ad1.png" alt="" />
        <span>广告</span>
      </div>
      <div class="sidebar-block banner">
        <img src="../../../assets/img/home-aside/ad2.png" alt="" />
        <span>广告</span>
      </div>
      <!-- 下载栏 -->
      <div class="sidebar-block app">
        <a href="https://juejin.cn/app" target="blank">
          <img class="app-img" src="../../../assets/img/home-aside/app.png" />
        </a>
        <div class="app-des">
          <div class="app-des-title">下载稀土掘金APP</div>
          <div class="app-des-content">一个帮助开发者成长的社区</div>
        </div>
      </div>
      <!-- 作者榜 -->
      <div class="sidebar-block author-top">
        <!-- 列表表头 -->
        <div class="author-title">🎖️作者榜</div>
        <!-- 作者列表 -->
        <div class="author-list" v-for="(item, i) in authorList" :key="i">
          <img class="author-img" :src="item.avatar_large" alt="" />
          <div class="author-info">
            <div class="author-name">{{ item.user_name }}</div>
            <div class="author-des">{{ item.job_title }}</div>
          </div>
        </div>
        <!-- 查看更多 -->
        <div class="author-all">
          完整榜单<i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <!-- 前往其它地方 -->
      <div class="sidebar-block link-block">
        <div class="link-list">
          <img
            src="../../../assets/img/home-aside/app.png"
            class="link-img"
            alt=""
          />
          稀土掘金漫游指南
        </div>
        <div class="link-list">
          <img
            src="../../../assets/img/home-aside/app.png"
            class="link-img"
            alt=""
          />
          安装掘金浏览器插件
        </div>
        <div class="link-list">
          <img
            src="../../../assets/img/home-aside/app.png"
            class="link-img"
            alt=""
          />
          前往掘金翻译计划
        </div>
      </div>
      <!-- 描述 -->
      <div class="sidebar-block my-des">
        <div class="my-title">淘金队仿掘金</div>
        <div class="my-content">
          <div>技术栈: vue2 element-ui axios...</div>
          <div class="gitee">
            <a href="https://gitee.com/aubrey-xu/juejin">gitee 地址</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动 1500px 以上显示的其它广告 -->
    <transition>
      <div
        class="sidebar-other"
        :style="{ top: isHideHead ? 67 + 'px' : 127 + 'px' }"
        v-show="isShowAD"
      >
        <div class="sidebar-block banner">
          <img src="../../../assets/img/home-aside/ad1.png" alt="" />
          <span>广告</span>
        </div>
        <div class="sidebar-block banner">
          <img src="../../../assets/img/home-aside/ad2.png" alt="" />
          <span>广告</span>
        </div>
        <div class="sidebar-block app">
          <a href="https://juejin.cn/app" target="blank">
            <img class="app-img" src="../../../assets/img/home-aside/ad3.png" />
          </a>
          <div class="app-des">
            <div class="app-des-title">下载稀土掘金APP</div>
            <div class="app-des-content">一个帮助开发者成长的社区</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'

// 因为接口问题,这里用图床图片代替广告图
// https://image.xumaobin.xyz/2022/08/17/f7446d23840e2.png
// https://image.xumaobin.xyz/2022/08/17/2a14a44ad89c4.png

// 本页面用到的 API ,不用传递参数
import { reqArticleTop } from '@/api/author'

export default {
  data() {
    return {
      // 作者榜单
      authorList: []
    }
  },
  methods: {},
  computed: {
    ...mapState(['isHideHead', 'isShowAD'])
  },
  async created() {
    const { data: res } = await reqArticleTop()
    this.authorList = res.data.slice(0, 3)
  }
}
</script>

<style lang="less" scoped>
.sidebar-container {
  width: 20rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;

  .sidebar {
    // 签到
    .sign {
      padding: 16px;
      .sign-hello {
        display: flex;
        margin-bottom: 8px;
        .sign-img {
          width: 24px;
          height: 24px;
          margin-right: 1rem;
        }

        span {
          margin-top: 2px;
          color: #1d2129;
          font-size: 18px;
          font-weight: 500;
        }

        .sign-btn {
          border-radius: 50px;
          height: 32px;
          width: 72px;
          margin-left: auto;
          border: 1px solid #1e80ff;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #1e80ff;
          font-size: 14px;
          font-weight: 400;
        }
      }

      .sign-des {
        margin-left: 36px;
        color: #4e5969;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        align-items: center;
      }
    }

    .author-top {
      .author-title {
        border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
        padding: 1rem 1.3rem;
        font-size: 1.16rem;
        line-height: 1.29;
        color: #333;
      }

      .author-list {
        padding: 1rem 1.3rem;
        display: flex;
        align-items: center;
        cursor: pointer;

        .author-img {
          width: 3.8rem;
          height: 3.8rem;
          border-radius: 50%;
          margin-right: 0.5rem;
        }

        .author-info {
          overflow: hidden;
          .author-name {
            font-size: 1.16rem;
            font-weight: 400;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .author-des {
            color: #909090;
            font-size: 1rem;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .author-all {
        color: #007fff;
        padding: 1rem 0;
        text-align: center;
        font-size: 1.16rem;
        line-height: 1.29;
        cursor: pointer;
        border-top: 1px solid hsla(0, 0%, 59.2%, 0.1);
      }
    }

    .link-block {
      .link-list {
        display: flex;
        align-items: center;
        padding: 1rem;
        height: 100%;
        font-size: 1.16rem;
        line-height: 1;
        color: #333;
        cursor: pointer;

        .link-img {
          width: 3rem;
          height: 3rem;
          margin-right: 0.8rem;
        }
      }
    }

    .my-des {
      .my-title {
        font-size: 1.16rem;
        padding: 1rem;
        line-height: 1.29;
        border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
      }
      .my-content {
        padding: 1rem;
        .gitee {
          margin-top: 1rem;
          a {
            text-decoration: none;
          }
        }

        .gitee:hover {
          color: #007fff;
        }
      }
    }
  }

  // 广告 banner
  .banner {
    height: 120px;
    position: relative;
    cursor: pointer;

    span {
      position: absolute;
      bottom: 0.5rem;
      right: 0.5rem;
      opacity: 0.5;
      border: 1px solid #fff;
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 1rem;
      background-color: rgba(0, 0, 0, 0.2);
      color: #fff;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
  // 下载 app
  .app {
    display: flex;
    padding: 1rem;

    .app-img {
      width: 4.167rem;
      height: 4.167rem;
      margin-right: 16px;
      cursor: pointer;
    }
    .app-des {
      .app-des-title {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        color: #1d2129;
      }
      .app-des-content {
        margin-top: 0.5rem;
        font-size: 12px;
        line-height: 20px;
        color: #86909c;
      }
    }
  }
  .sidebar-block {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    border-radius: 2px;
    margin-bottom: 1.3rem;
    color: #333;
  }

  // 下部banner与app容器
  .sidebar-other {
    position: fixed;
    top: 6rem;
    transition: top 0.3s;
  }
}

// 动画效果
.v-enter-active {
  animation: ani 0.3s reverse;
}

.v-leave-active {
  animation: ani 0.3s;
}

@keyframes ani {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}
</style>
